/**
 * 子传父：子组件调用父组件传递过来的函数，并且把想要传递的数据当成函数的实参传入即可
 * 
 */

import React from "react"
// App父组件 Son子组件
// 函数式Son --- 解构赋值
function Son ({ getSonMsg }) {
  function clickHandle () {
    // 也可以传递变量
    const sonMsg = '这是来自于子组件的数据'
    getSonMsg(sonMsg)
  }
  return (
    <div>我是函数子组件,
      <div>
        this is son
        {/* <button onClick={() => getSonMsg('这是来自于子组件中的数据')}>点击</button> */}
        {/* 简写 */}
        <button onClick={clickHandle}>点击</button>
      </div>
    </div>
  )
}

class App extends React.Component {

  // 1.准备一个函数 传给子组件
  getSonMsg = (sonMsg) => {
    // 子组件传递过来的值
    console.log(sonMsg)
  }
  render () {
    return (
      <>
        <Son getSonMsg={this.getSonMsg}>
        </Son>
      </>

    )
  }
}
export default App
